<template>
  <!-- 显示的数据，纵向边框， -->
  <el-table
    :data="paging.slice((pageNum - 1) * PageSize, pageNum * PageSize)"
    border
    class="PageSizepageNum"
  >
    <!-- 索引，自定义索引，表头 -->
    <el-table-column
      type="index"
      :index="indexMethod"
      label="序号"
    ></el-table-column>
    <el-table-column label="数据源名称">
      <!-- 自定义插槽 -->
      <template slot="header">
        <span style="margin-right:5px">数据源名称</span>
        <el-tooltip class="item" effect="dark" content="数据源名称" placement="top">
          <span class="el-icon-question details-icon"></span>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <!-- 样式，点击事件 -->
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceName }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="数据源地址">
      <template slot="header">
        <span style="margin-right:5px">数据源地址</span>
        <el-tooltip class="item" effect="dark" content="数据源地址" placement="top">
          <span class="el-icon-question details-icon"></span>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceUrl }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="数据库名称">
      <template slot="header">
        <span style="margin-right:5px">数据库名称</span>
        <el-tooltip class="item" effect="dark" content="数据库名称" placement="top">
          <span class="el-icon-question details-icon"></span>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dbName }}
        </div>
      </template>
    </el-table-column>
    <!-- 对应列的字段名，表头 -->
    <el-table-column prop="dataSourceType" label="类型">
      <template slot="header">
        <span style="margin-right:5px">类型</span>
        <el-tooltip class="item" effect="dark" content="类型" placement="top">
          <span class="el-icon-question details-icon"></span>
        </el-tooltip>
      </template></el-table-column>
    <el-table-column prop="dataSourceDesc" label="描述">
      <template slot="header">
        <span style="margin-right:5px">描述</span>
        <el-tooltip class="item" effect="dark" content="描述" placement="top">
          <span class="el-icon-question details-icon"></span>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceDesc }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="updateTime"
      width="170px"
      label="更新时间"
    ></el-table-column>
    <el-table-column label="操作" width="155px">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)" type="primary" size="small"
          >编辑
        </el-button>
        <!-- 直接删除 -->
        <el-button type="danger" size="small" @click="remove(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {
  DropDownList,
  DeleteHicky,
  //   PagingQuer,
  // IndexNew,
  // SourceUpdate,
  //   isLogin,
} from "@/assets/js/api";
import commentFn from "./conmmen";
export default {
  props: {
    name: {
      type: Object,
      default: () => {},
    },
    paging: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      //弹窗表单
      ruleForm: {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      },
      // 向后台传的分页数据
      //   name: {
      //     pageNum: 1,
      //     pageSize: 10,
      //     dataSourceType: null,
      //   },
      // 当前页
      pageNum: 1,
      // 每页条数
      PageSize: 10,
      // 列表数据
      //   paging: [],
      //表格数据
      tableData: [],
      // 添加里的列表
      itemtableData: [],
    };
  },
  created() {
    this.souarData(); //初始化列表接口调用
  },
  methods: {
    // 删除
    remove(add) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await DeleteHicky(add);
          if (res.code == 0) {
            this.$emit("PagingQuery", true);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }else{
            this.$message.error("删除失败！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //  序号翻页连续排序
    indexMethod(index) {
      return (this.name.pageNum - 1) * this.name.pageSize + index + 1;
    },
    // 表格内显示与隐藏
    isinfo(val) {
      if (val.isClass == "isStyle") {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "";
          }
        });
      } else {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "isStyle";
          }
        });
      }
    },
    async souarData() {
      //调用列表接口
      let res = await DropDownList();
      if (res.code == 0) {
        this.tableData = res.data;
        this.itemtableData = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 编辑按钮
    handleEdit(row) {
      this.$emit("isEditTable", (this.isEditTable = true));
      this.$emit("Modify", (this.Modify = "编辑"));
      this.$emit("isDialog", (this.isDialog = true));
      this.ruleForm = {
        id: row.id,
        dataSourceName: row.dataSourceName,
        dataSourceUrl: row.dataSourceUrl,
        dbName: row.dbName,
        dataSourceUserName: row.dataSourceUserName,
        dataSourceType: row.dataSourceType,
        dataSourcePwd: row.dataSourcePwd,
        dataSourceDesc: row.dataSourceDesc,
      };
      this.ReplaceType();
      this.$emit("ruleForm", this.ruleForm);
    },
    // 替换类型
    ReplaceType() {
      let item = this.ruleForm;
      commentFn.data.forEach((e, s) => {
        item.dataSourceType == commentFn.data[s].name
          ? (item.dataSourceType = commentFn.data[s].id)
          : "";
      });
    },
  },
};
</script>

<style scoped>
.searchBar {
  height: 60px;
  line-height: 60px;
}
.onebox {
  margin-left: 30px;
}
::v-deep .el-input__inner {
  height: 30px;
}

.el-table {
  width: auto;
}
.Popup_inputwidth {
  width: 80%;
}
.add_to {
  color: #000;
  margin-left: 50px;
}
.isStyle {
  white-space: nowrap;
}
.el-icon-question {
  color: rgb(182, 177, 177);
}
</style>
